<template>
  <el-button @click="getCode" class="getCode" :disabled="codeList.disableCode" plain>
    {{ codeList.textCode }}
  </el-button>
</template>
<script>
  data() {
    return {
      codeList: {
        textCode: '获取验证码',
        disableCode: false, // 按钮是否可以点击
        count: 60, // 倒计时秒数
        timer: null, // 定时器
      }

    }
  },
methods: {
  // 点击获取短信验证码
getCode() {
  const reg = /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/ // 手机号验证
  if (reg.test(this.phone)) {
    if (!this.timer) {
      this.$axios.get(`xx`,
        )
        .then((res) => {
          console.log('短信验证码----', res)
          if (res.data && res.status == 200) {
            this.$message.success('验证码发送成功')
            this.smsKey = res.data.smskey // 给短信参数赋值
            this.codeList.count = 60
            this.codeList.disableCode = true
            this.codeList.timer = setInterval(() => {
              if (this.codeList.count > 0 && this.codeList.count <= 60) {
                this.codeList.textCode = this.codeList.count + '秒重新发送后'
                this.codeList.count--
              } else {
                this.codeList.disableCode = false
                this.codeList.textCode = '重新获取'
                this.codeList.count = 60
                clearInterval(this.codeList.timer)
                this.codeList.timer = null
              }
            }, 1000)
          } else {
            this.$message.error(res.data.msg)
          }
        })
    }
  } else {
    this.$message.error('请输入正确的手机号')
  }
}
},
</script>
